<template>
  <div id="app">
      <div class="content">
        <router-view></router-view>
      </div>

      
      <div class="bottom">
        <router-link to="/goodslist" tag="div">商品列表</router-link>
        <router-link to="/shopcart" tag="div">购物车</router-link>
      </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  display: flex;
  height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: scroll;
}
.bottom {
  display: flex;
  height: 40px;
  justify-content: center;
  background-color: burlywood;
}
.bottom > div {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  /* border-right: 1px solid blue; */
  /* line-height: 40px; */
  /* line-height: 40px;
  text-align: center; */
}
.bottom > div:not(:last-child) {
  border-right: 1px solid blue;
}
.bottom > div.router-link-exact-active {
  background-color: cadetblue;
  color: white;
  font-weight: 800;
}
</style>
